<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Game is on!!!</title>
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
		<link type="text/css" rel="stylesheet" href="style/style.css">
		<link type="text/css" rel="stylesheet" href="style/jquery-ui-1.8.22.custom.css">
		<link type="text/css" rel="stylesheet" href="style/xchatbox.css">
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
		<script type="text/javascript" src="js/xchatbox.js"></script>
		<script type="text/javascript" src="client.js"></script>
	</head>
	<body>
		<div id = "main">
			<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="499">
			<!-- fwtable fwsrc="未命名" fwpage="頁面 1" fwbase="design.gif" fwstyle="Dreamweaver" fwdocid = "1596257584" fwnested="0" -->
			  <tr>
			   <td><img src="images/spacer.gif" width="60" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="51" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="11" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="8" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="5" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="6" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="7" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="7" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="16" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="7" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="5" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="18" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="7" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="16" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="8" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="16" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="7" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="16" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="6" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="98" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="33" height="1" border="0" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
			  </tr>

			  <tr>
			   <td rowspan="9" colspan="2"><img name="design_r1_c1" src="images/design_r1_c1.gif" width="111" height="97" border="0" id="design_r1_c1" alt="" /></td>
			   <td rowspan="2" colspan="2">
				<a class = "color-selector" data-color = "#b5b6b6" href = "#">
					<img name="design_r1_c3" src="images/design_r1_c3.gif" width="19" height="40" border="0" id="design_r1_c3" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c5" src="images/design_r1_c5.gif" width="5" height="73" border="0" id="design_r1_c5" alt="" /></td>
			   <td rowspan="3">
				<a class = "color-selector" data-color = "#ef92bb" href = "#">
					<img name="design_r1_c6" src="images/design_r1_c6.gif" width="19" height="42" border="0" id="design_r1_c6" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c7" src="images/design_r1_c7.gif" width="6" height="73" border="0" id="design_r1_c7" alt="" /></td>
			   <td rowspan="3">
				<a class = "color-selector" data-color = "#e60012" href = "#">
					<img name="design_r1_c8" src="images/design_r1_c8.gif" width="17" height="42" border="0" id="design_r1_c8" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c9" src="images/design_r1_c9.gif" width="7" height="73" border="0" id="design_r1_c9" alt="" /></td>
			   <td rowspan="4">
				<a class = "color-selector" data-color = "#f29300" href = "#">
					<img name="design_r1_c10" src="images/design_r1_c10.gif" width="17" height="44" border="0" id="design_r1_c10" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c11" src="images/design_r1_c11.gif" width="7" height="73" border="0" id="design_r1_c11" alt="" /></td>
			   <td rowspan="5">
				<a class = "color-selector" data-color = "#fff100" href = "#">
					<img name="design_r1_c12" src="images/design_r1_c12.gif" width="16" height="46" border="0" id="design_r1_c12" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c13" src="images/design_r1_c13.gif" width="7" height="73" border="0" id="design_r1_c13" alt="" /></td>
			   <td rowspan="5">
				<a class = "color-selector" data-color = "#14a83b" href = "#">
					<img name="design_r1_c14" src="images/design_r1_c14.gif" width="19" height="46" border="0" id="design_r1_c14" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c15" src="images/design_r1_c15.gif" width="5" height="73" border="0" id="design_r1_c15" alt="" /></td>
			   <td rowspan="6">
				<a class = "color-selector" data-color = "#00a0e9" href = "#">
					<img name="design_r1_c16" src="images/design_r1_c16.gif" width="18" height="48" border="0" id="design_r1_c16" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c17" src="images/design_r1_c17.gif" width="7" height="73" border="0" id="design_r1_c17" alt="" /></td>
			   <td rowspan="7">
				<a class = "color-selector" data-color = "#005dad" href = "#">
					<img name="design_r1_c18" src="images/design_r1_c18.gif" width="16" height="50" border="0" id="design_r1_c18" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c19" src="images/design_r1_c19.gif" width="8" height="73" border="0" id="design_r1_c19" alt="" /></td>
			   <td rowspan="7">
				<a class = "color-selector" data-color = "#9f59a0" href = "#">
					<img name="design_r1_c20" src="images/design_r1_c20.gif" width="16" height="50" border="0" id="design_r1_c20" alt="" />
				</a>
				</td>
			   <td rowspan="8"><img name="design_r1_c21" src="images/design_r1_c21.gif" width="7" height="73" border="0" id="design_r1_c21" alt="" /></td>
			   <td rowspan="7">
				<a class = "color-selector" data-color = "#383635" href = "#">
					<img name="design_r1_c22" src="images/design_r1_c22.gif" width="16" height="50" border="0" id="design_r1_c22" alt="" />
				</a>
				</td>
			   <td colspan="4"><img name="design_r1_c23" src="images/design_r1_c23.gif" width="156" height="2" border="0" id="design_r1_c23" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="7"><img name="design_r2_c23" src="images/design_r2_c23.gif" width="6" height="71" border="0" id="design_r2_c23" alt="" /></td>
			   <td colspan="2"><img name="design_r2_c24" src="images/design_r2_c24.gif" width="117" height="38" border="0" id="design_r2_c24" usemap="#m_design_r2_c24" alt="" /></td>
			   <td rowspan="12"><img name="design_r2_c26" src="images/design_r2_c26.gif" width="33" height="598" border="0" id="design_r2_c26" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="6" colspan="2"><img name="design_r3_c3" src="images/design_r3_c3.gif" width="19" height="33" border="0" id="design_r3_c3" alt="" /></td>
			   <td rowspan="6" colspan="2"><img name="design_r3_c24" src="images/design_r3_c24.gif" width="117" height="33" border="0" id="design_r3_c24" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="5"><img name="design_r4_c6" src="images/design_r4_c6.gif" width="19" height="31" border="0" id="design_r4_c6" alt="" /></td>
			   <td rowspan="5"><img name="design_r4_c8" src="images/design_r4_c8.gif" width="17" height="31" border="0" id="design_r4_c8" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="4"><img name="design_r5_c10" src="images/design_r5_c10.gif" width="17" height="29" border="0" id="design_r5_c10" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="3"><img name="design_r6_c12" src="images/design_r6_c12.gif" width="16" height="27" border="0" id="design_r6_c12" alt="" /></td>
			   <td rowspan="3"><img name="design_r6_c14" src="images/design_r6_c14.gif" width="19" height="27" border="0" id="design_r6_c14" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="2"><img name="design_r7_c16" src="images/design_r7_c16.gif" width="18" height="25" border="0" id="design_r7_c16" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td><img name="design_r8_c18" src="images/design_r8_c18.gif" width="16" height="23" border="0" id="design_r8_c18" alt="" /></td>
			   <td><img name="design_r8_c20" src="images/design_r8_c20.gif" width="16" height="23" border="0" id="design_r8_c20" alt="" /></td>
			   <td><img name="design_r8_c22" src="images/design_r8_c22.gif" width="16" height="23" border="0" id="design_r8_c22" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="5"><img name="design_r9_c3" src="images/design_r9_c3.gif" width="11" height="527" border="0" id="design_r9_c3" alt="" /></td>
			   <td rowspan="4" colspan="21">
					<div id = "canvas-layout">
					<canvas id = "canvas" width = "325" height = "493"></canvas>
					</div>
				</td>
			   <td rowspan="5"><img name="design_r9_c25" src="images/design_r9_c25.gif" width="19" height="527" border="0" id="design_r9_c25" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="24" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="2">
				<img name="design_r10_c1" src="images/design_r10_c1.gif" width="60" height="451" border="0" id="design_r10_c1" alt="" />
				<div id="size-selector" style="height:420px;"></div>
				</td>
			   <td rowspan="4"><img name="design_r10_c2" src="images/design_r10_c2.gif" width="51" height="503" border="0" id="design_r10_c2" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="280" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td><img src="images/spacer.gif" width="1" height="171" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td rowspan="2"><img name="design_r12_c1" src="images/design_r12_c1.gif" width="60" height="52" border="0" id="design_r12_c1" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="18" border="0" alt="" /></td>
			  </tr>
			  <tr>
			   <td colspan="21"><img name="design_r13_c4" src="images/design_r13_c4.gif" width="325" height="34" border="0" id="design_r13_c4" alt="" /></td>
			   <td><img src="images/spacer.gif" width="1" height="34" border="0" alt="" /></td>
			  </tr>
			</table>
			<map name="m_design_r2_c24" id="m_design_r2_c24">
			<area shape="poly" coords="0,10,12,6,100,0,116,1,117,30,2,38" class = "color-selector" data-color = "#FFF" href = "#" alt="" />
			</map>
			<!--
			<div id = "canvas-layout">
				<canvas id = "canvas" width = "960" height = "720"></canvas>
			</div>
			<div id = "canvas-tools">
				<a id = "apply-canvas" href = "#">加入</a>
				
				<a class = "color-selector" data-color = "#659b41" href = "#"></a>
				<a class = "color-selector" data-color = "#ffcf33" href = "#"></a>
				<a class = "color-selector" data-color = "#986928" href = "#"></a>
			</div>
			<div class = "clear"></div>
			-->
		</div>
		<div id = "xchatbox">
			<div id = "xchatbox-inner">
				<div id = "xchatbox-message">
				</div>
				<div id = "xchatbox-panel">
					<div id = "xchatbox-control">
					</div>
					<div id = "xchatbox-input">
						<form id = "xchatbox-form">
							<textarea id = "xchatbox-msg-input"></textarea>
							<input type="submit" value="发送" />
							<a id = "answer-drawing" href = "#">回答</a>
							<a id = "apply-canvas" href = "#">我要画</a>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	try {
		  //var socket = io.connect('http://localhost');
		  var socket = io.connect();
		  
	  }
	  catch (ex) {
		//server not running, ignore
	  }
	  window.broadcast = function(data) {
		if (window.socket) {
			socket.emit('data', data);
		}
	  }
	</script>
</html>
